<template>
  <div class="app-container">

    <!--    识别图 可选择列表 start-->

    <el-dialog
      :visible.sync="arsbtlistWin.show"
      width="1000px"
    >
      <arsbtlist :card-row-num="3" @sbtInfo="onchengSbtList" />
    </el-dialog>

    <!--    识别图 可选择列表 end -->

    <div style="margin-bottom: 30px;padding-left: 30px">
      <el-button type="success" @click="submit"> 保 存</el-button>
      <el-button type="success" @click="addZhuTask()">新 增</el-button>
      <template>
        <el-select
          v-model="fangjianhao"
          style="margin-left: 30px;"
          placeholder="请选择"
          @change="onchengFangJianHao"
        >
          <el-option
            label="试玩房间"
            value="0"
          />

          <el-option
            v-for="item in 30"
            :key="item"
            :label="item+'号房间'"
            :value="item.toString()"
          />
        </el-select>
      </template>

    </div>
    <div v-for="(item,index) in maintask" :key="index">
      <el-form ref="form" :model="maintask[index]" label-width="120px">
        <el-form-item label="任务名称">
          <el-input v-model="maintask[index].title" />
        </el-form-item>
        <el-form-item label="任务简介">
          <el-input v-model="maintask[index].introduction " type="textarea" />
        </el-form-item>

        <el-form-item label="任务内容">
          <el-input v-model="maintask[index].content" type="textarea" />
        </el-form-item>

        <el-form-item label="主任务任务奖励">

          <!--         主任务任务奖励-->
          <task-award
            :list="item.rewardProps"
            @change="item.rewardProps=$event"
          />

        </el-form-item>

        <el-form-item label="主任务开启条件" style="overflow: hidden;">
          <el-select
            v-if="kaiQiTiaoJianList.length"
            v-model="maintask[index].preRequireA"
            style="width: 50%"
            placeholder="请选择条件"
          >
            <el-option
              v-for="(item,index) in kaiQiTiaoJianList"
              :key="index"
              :label="item"
              :value="index+''"
            />

          </el-select>
          <el-input
            v-model="maintask[index].preRequireB"
            placeholder="请输入数量"
            style="width: 50%"
            type="Number"
          />
        </el-form-item>
        <el-form-item label="子任务顺序">
          <el-radio-group v-model="maintask[index].subMode">
            <el-radio-button label="0" value="0">顺序</el-radio-button>
            <el-radio-button label="1" value="1">随机</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="子任务">
          <div style="border: 1px solid #ccc;padding: 30px">
            <div style="margin-bottom: 30px;padding-left: 30px">
              <el-button type="primary" @click="addSubtask(index)">新增</el-button>
            </div>
            <div class="block">
              <el-timeline>
                <el-timeline-item v-for="(item1,index1) in item.subTasks" :key="index1" :timestamp="'任务 '+(index1+1)" placement="top">
                  <el-card>
                    <el-form ref="ruleForm" label-width="" class="demo-ruleForm">
                      <el-form-item label="任务名称">
                        <el-input v-model="item1.title" />
                      </el-form-item>
                      <el-form-item label="任务简介">
                        <el-input v-model="item1.introduction" type="textarea" />
                      </el-form-item>
                      <el-form-item label="任务内容">
                        <el-input v-model="item1.content" type="textarea" />
                      </el-form-item>
                      <el-form-item label="完成方式：" />

                      <el-tabs v-model="item1.finishMode" type="border-card">
                        <el-tab-pane label="AR">

                          <table class="ar-shibietu-table" cellspacing="0" cellpadding="0">
                            <tr><th style="width: 90px;">识别图</th><td>
                              <img style="max-width: 200px;" :src="item1.arImage" alt="">
                            </td>
                              <td>
                                <el-button type="primary" @click="openSbtListJxXuanze(index,index1)">选择识别图</el-button>
                              </td>
                            </tr>

                          </table>

                          <el-form-item label="AR 完成奖励">
                            <div style="display: flex">
                              <task-award
                                :list="item1.rewardProps"
                                @change="item1.rewardProps=$event"
                              />
                            </div>
                          </el-form-item>
                          <el-form-item label="任务完成奖励">
                            <div style="display: flex">
                              <task-award
                                :list="item1.taskFinishReward"
                                @change="item1.taskFinishReward=$event"
                              />
                            </div>
                          </el-form-item>

                          <el-form-item label="任务完成依据">
                            <div style="display: flex;">
                              <task-award
                                :list="item1.taskIsFinishProps"
                                @change="item1.taskIsFinishProps=$event"
                              />
                            </div>
                          </el-form-item>

                          <el-form-item label="任务消耗道具">
                            <div style="display: flex;">
                              <task-award
                                :list="item1.deleteRewardList"
                                @change="item1.deleteRewardList=$event"
                              />
                            </div>
                          </el-form-item>

                          <!--                          <imageUpload :image-url="item1.arImage" @oncheng="item1.arImage =$event.url,item1.easyarId=$event.id" />-->

                        </el-tab-pane>
                        <el-tab-pane label="小游戏">

                          <el-form-item label="请选择小游戏">
                            <div style="display: flex">
                              <el-select
                                v-model="item1.miniGameId"
                                style="width: 100%"
                                placeholder="请选择小游戏"
                              >
                                <el-option
                                  v-for="(xyxitem,xyxindex) in xiaoYouXiList"
                                  :key="xyxindex"
                                  :label="xyxitem.name"
                                  :value="xyxitem.id"
                                />

                              </el-select>
                            </div>
                          </el-form-item>
                          <el-form-item label="选择火把顺序" style="margin-top: 15px" v-show="item1.miniGameId==6">
                            <div style="display: flex;">
                              <el-select
                                v-model="item1.torchOrder"
                                multiple
                                style="width: 100%"
                                placeholder="请选择">
                                <el-option
                                  v-for="item in numList"
                                  :key="item"
                                  :label="item"
                                  :value="item">
                                </el-option>
                              </el-select>
                            </div>
                          </el-form-item>

                          <el-form-item label="小 游 戏 奖励">
                            <div style="display: flex">
                              <task-award
                                :list="item1.rewardProps"
                                @change="item1.rewardProps=$event"
                              />
                            </div>
                          </el-form-item>
                          <el-form-item label="任 务 奖 励">
                            <div style="display: flex;padding-left: 13px;">
                              <task-award
                                :list="item1.taskFinishReward"
                                @change="item1.taskFinishReward=$event"
                              />
                            </div>
                          </el-form-item>

                          <el-form-item label="任务完成依据">
                            <div style="display: flex;">
                              <task-award
                                :list="item1.taskIsFinishProps"
                                @change="item1.taskIsFinishProps=$event"
                              />
                            </div>
                          </el-form-item>

                          <el-form-item label="任务消耗道具">
                            <div style="display: flex;">
                              <task-award
                                :list="item1.deleteRewardList"
                                @change="item1.deleteRewardList=$event"
                              />
                            </div>
                          </el-form-item>

                        </el-tab-pane>

<!--                        <el-tab-pane label="合成">-->

<!--                          <el-form-item label="任务奖励">-->
<!--                            <div style="display: flex;padding-left: 25px;">-->
<!--                              <task-award-->
<!--                                :list="item1.taskFinishReward"-->
<!--                                @change="item1.taskFinishReward=$event"-->
<!--                              />-->
<!--                            </div>-->
<!--                          </el-form-item>-->

<!--                          <el-form-item label="任务完成依据">-->
<!--                            <div style="display: flex;">-->
<!--                              <task-award-->
<!--                                :list="item1.taskIsFinishProps"-->
<!--                                @change="item1.taskIsFinishProps=$event"-->
<!--                              />-->
<!--                            </div>-->
<!--                          </el-form-item>-->

<!--                          <el-form-item label="任务消耗道具">-->
<!--                            <div style="display: flex;">-->
<!--                              <task-award-->
<!--                                :list="item1.deleteRewardList"-->
<!--                                @change="item1.deleteRewardList=$event"-->
<!--                              />-->
<!--                            </div>-->
<!--                          </el-form-item>-->

<!--                        </el-tab-pane>-->

                        <el-tab-pane label="其它">
                          <el-form-item label="任务奖励">
                            <div style="display: flex;padding-left: 25px;">
                              <task-award
                                :list="item1.taskFinishReward"
                                @change="item1.taskFinishReward=$event"
                              />
                            </div>
                          </el-form-item>

                          <el-form-item label="任务完成依据">
                            <div style="display: flex;">
                              <task-award
                                :list="item1.taskIsFinishProps"
                                @change="item1.taskIsFinishProps=$event"
                              />
                            </div>
                          </el-form-item>

                          <el-form-item label="任务消耗道具">
                            <div style="display: flex;">
                              <task-award
                                :list="item1.deleteRewardList"
                                @change="item1.deleteRewardList=$event"
                              />
                            </div>
                          </el-form-item>

                        </el-tab-pane>
                        <el-tab-pane label="AR+小游戏">
                          <table class="ar-shibietu-table" cellspacing="0" cellpadding="0">
                            <tr><th style="width: 90px;">识别图</th><td>
                              <img style="max-width: 200px;" :src="item1.arImage" alt="">
                            </td>
                              <td>
                                <el-button type="primary" @click="openSbtListJxXuanze(index,index1)">选择识别图</el-button>
                              </td>
                            </tr>

                          </table>
                          <el-form-item label="请选择小游戏" style="margin-top: 15px">
                            <div style="display: flex;">
                              <el-select
                                v-model="item1.miniGameId"
                                style="width: 100%"
                                placeholder="请选择小游戏"
                              >
                                <el-option
                                  v-for="(xyxitem,xyxindex) in xiaoYouXiList"
                                  :key="xyxindex"
                                  :label="xyxitem.name"
                                  :value="xyxitem.id"
                                />

                              </el-select>
                            </div>
                          </el-form-item>
                          <el-form-item label="选择火把顺序" style="margin-top: 15px" v-show="item1.miniGameId==6">
                            <div style="display: flex;">
                              <el-select
                                v-model="item1.torchOrder"
                                multiple
                                style="width: 100%"
                                placeholder="请选择">
                                <el-option
                                  v-for="item in numList"
                                  :key="item"
                                  :label="item"
                                  :value="item">
                                </el-option>
                              </el-select>
                            </div>
                          </el-form-item>
                          <el-form-item label="小 游 戏 奖励">
                            <div style="display: flex">
                              <task-award
                                :list="item1.rewardProps"
                                @change="item1.rewardProps=$event"
                              />
                            </div>
                          </el-form-item>
                          <el-form-item label="任 务 奖 励">
                            <div style="display: flex;padding-left: 13px;">
                              <task-award
                                :list="item1.taskFinishReward"
                                @change="item1.taskFinishReward=$event"
                              />
                            </div>
                          </el-form-item>

                          <el-form-item label="任务完成依据">
                            <div style="display: flex;">
                              <task-award
                                :list="item1.taskIsFinishProps"
                                @change="item1.taskIsFinishProps=$event"
                              />
                            </div>
                          </el-form-item>

                          <el-form-item label="任务消耗道具">
                            <div style="display: flex;">
                              <task-award
                                :list="item1.deleteRewardList"
                                @change="item1.deleteRewardList=$event"
                              />
                            </div>
                          </el-form-item>

                        </el-tab-pane>
                      </el-tabs>

                      <el-form-item style="padding-top: 30px">
                        <el-button type="primary" @click="delTask(index,index1)">删除</el-button>
                      </el-form-item>
                    </el-form>
                  </el-card>
                </el-timeline-item>
              </el-timeline>

            </div>

            <div style="margin-bottom: 30px;padding-left: 30px">
              <el-button type="primary" @click="addSubtask(index)">新增</el-button>

            </div>

          </div>

        </el-form-item>
      </el-form>
      <div style="margin-bottom: 30px;padding-left: 30px;display: flex;">
        <el-button type="success" style="margin-left: auto" @click="delTask(index)">删除当前主任务</el-button>
      </div>
      <div style="margin:  30px 0;border-top: 1px solid #ddd" />

    </div>

    <div style="margin-bottom: 30px;padding-left: 30px">
      <el-button type="success" @click="submit"> 保 存</el-button>
      <el-button type="success" @click="addZhuTask()">新 增</el-button>
    </div>

  </div>
</template>

<script>

import arsbtlist from '@/views/arsbt/arsbtlist' // //2021 12 3 新增

import taskApi from '@/api/taskApi'
import daojuApi from '@/api/daojuApi'

// 主任务 奖励 组件就 2020  12 20
import taskAward from '@/views/taskManagement/addTask/task-award'
import taskItem from '@/views/taskManagement/addTask/task-item'

import hechengApi from '@/api/hecheng'

export default {
  inject: ['reload'],
  components: {
    // 主任务 奖励 组件
    'task-award': taskAward, 'task-item': taskItem,
    arsbtlist
  },
  data() {
    return {
      hechengList: [
        {}
      ],
      // 可供选择的小游戏 列表
      xiaoYouXiList: [
        { name: '术法轮盘', id: 1 },
        { name: '消除邪灵', id: 2 },
        { name: '重力方块', id: 3 },
        { name: '小球弹跳', id: 4 },
        { name: '同色消消乐', id: 5 },
        { name: '崖洞驱魔', id: 6 }
      ],

      // 合成列表
      hedaoList: [],
      // 识别图 显示窗口
      arsbtlistWin: {
        show: false,
        suoye: []
      },

      fangjianhao: 1,
      daojuList: [], // 道具列表 给用户提供奖励选择
      jingjielist: [], // 境界
      numList: ['1','2','3','4','5'],
      kaiQiTiaoJianList: [
        '气血', '灵力', '仙力', 'NPC好感值', '仙币', '境界'
      ],
      // 主任务数组
      maintask: [
        // {
        //   "id": 176,
        //   "title": "第三章【剑灵认主】",
        //   "introduction": null,
        //   "content": null,
        //   "rewardProps": [
        //     "13,27"
        //   ],
        //   "subMode": 0,
        //   "homeId": 1,
        //   "finishMode": null,
        //   "arImage": null,
        //   "miniGameId": 0,
        //   "preRequireA": "5",
        //   "preRequireB": "2",
        //   "superset": 0,
        //   "subSort": 1,
        //   "deleteReward": null,
        //   "easyarId": null,
        //   "taskFinishReward": null,
        //   "taskIsFinishProps": null,
        //   "subTasks": [
        //     {
        //       "id": 178,
        //       "title": "铸剑（一）",
        //       "introduction": null,
        //       "content": "铸剑需要三块铸剑灵石，第一块铸剑灵石在溪曲阁团蒲下面。提示：前往溪曲阁检查所有团蒲，找到带有“剑”字的蓝色石头，扫描石头完成任务。（桌灯）",
        //       "rewardProps": [
        //         "13,27"
        //       ],
        //   ]
        // }
      ]
    }
  },
  // 生命周期 进入页面的时候初始化组件
  created() {
    localStorage.fangjianhao = localStorage.fangjianhao || 1

    this.fangjianhao = localStorage.fangjianhao

    taskApi.getFuRenWuByFangJianId(localStorage.fangjianhao).then(res => {
      return res.data.list
    }).then(maintask => {
      console.log(maintask)
      console.log('maintask:' + maintask)
      for (const i in maintask) {
        // 接收这个主任务的奖励道具
        // maintask[i].rewardProps = maintask[i].rewardProps.split(',')
        // 接收这个主任务的所有子任务
        for (const j in maintask[i].subTasks) {
          // 子任务的奖励
          // maintask[i].subTasks[j].rewardProps = maintask[i].subTasks[j].rewardProps.split(',')

          // let deleteReward = maintask[i].subTasks[j].deleteReward
          // deleteReward = deleteReward || ''
          // maintask[i].subTasks[j].deleteReward = deleteReward.split(',')

          maintask[i].subTasks[j].finishMode += ''
        }
      }

      this.maintask = maintask
    })

    //  设置 道具列表
    daojuApi.getDaojuList().then(res => {
      this.daojuList = res.data.list
    })
    // 设置 境界列表
    taskApi.getJIngjieList().then(res => {
      this.jingjielist = res.data.list
    })
    // hechengApi.getHeChengList().then(res => {
    //   return res.data.list.map(item => {
    //     const lableArr = item.propsList.map(row => row.propsName)
    //     const lableEnd = lableArr.splice(lableArr.length - 1, 1)
    //     item.label = lableArr.toString().replace(/,/g, ' + ') + ' = ' + lableEnd.toString()
    //     item.value = item.propsList.map(row => row.id).toString()
    //
    //     return item
    //   })
    // }).then(list => {
    //   this.hechengList = list
    // })
  },
  methods: {
    // 用户在识别图列表中选择后触发
    onchengSbtList(e) {
      console.log(e)
      const maintask = JSON.parse(JSON.stringify(this.maintask))
      // arImage easyarId
      const { suoye, show } = this.arsbtlistWin
      console.log(suoye)

      maintask[suoye[0]].subTasks[suoye[1]].easyarId = e.targetId
      maintask[suoye[0]].subTasks[suoye[1]].arImage = e.image
      this.maintask = maintask
      this.arsbtlistWin.show = false
      this.arsbtlistWin.suoye = []
    },

    // 显示识别图列表
    openSbtListJxXuanze(...suoye) {
      this.arsbtlistWin.suoye = suoye
      this.arsbtlistWin.show = true
    },

    onchengFangJianHao(e) {
      console.log(this.fangjianhao)
      localStorage.fangjianhao = this.fangjianhao

      this.reload()
    },

    addZhuTask() {
      const maintask = JSON.parse(JSON.stringify(this.maintask))
      maintask.push({ subTasks: [], mainReward: [] })

      //   maintask.push({ mainReward: [] }),
      //   console.log('maintask:::' + JSON.stringify(maintask))
      this.maintask = maintask
    },
    async submit() {
      //深拷贝
      const maintask = JSON.parse(JSON.stringify(this.maintask))


      for (const i in maintask) {
        //删除没有 标题的主任务
        if (!maintask[i].title) {
          delete maintask[i]
          continue
        }
        //设置 主任务 id 有则是 本身 没有则是 0
        maintask.id = maintask.id || 0
        //为 主任务 homeId
        maintask[i].homeId = localStorage.fangjianhao


        for (const j in maintask[i].subTasks) {
          // console.log('子')
          // console.log(maintask[i].subTasks[j].title)
          if (!maintask[i].subTasks[j].title) {
            delete maintask[i].subTasks[j]
            continue
          }


          maintask[i].subTasks[j].id = maintask[i].subTasks[j].id || 0
          //为子任务添加homeID
          maintask[i].subTasks[j].homeId = localStorage.fangjianhao
        }
        maintask[i].subTasks = maintask[i].subTasks.filter(item => item)
      }
      taskApi.addTask(maintask).then(res => {
        this.$message.success('新增成功')
        this.reload()
        console.log(res)
      })
    },

    // 模拟提交按钮
    submitReword() {
      const maintask = JSON.parse(JSON.stringify(this.maintask))

      for (const i in maintask) {
        if (!maintask[i].mainReward.preRequireA) {
          console.log('i:' + i + '---奖励:' + maintask[i].mainReward)
          delete maintask[i].mainReward
          continue
        }
        if (!maintask[i].mainReward.preRequireB) {
          delete maintask[i].mainReward
          continue
        }

        console.log('模拟提交按钮' + maintask[i].mainReward)
      }
    },

    // 添加主任务奖励
    // 主任务奖励有多个 分别是道具加数量
    addMainMissionReward(index) {
      const maintask = JSON.parse(JSON.stringify(this.maintask))
      console.log(index)
      console.log('addMainMissionReward:' + JSON.stringify(maintask))
      console.log(maintask[index].mainReward)
      maintask[index].mainReward.push({})
      this.maintask = maintask
    },

    addSubtask(mainIndex) {
      const maintask = JSON.parse(JSON.stringify(this.maintask))
      console.log(mainIndex)
      console.log(maintask[mainIndex].subTasks)
      maintask[mainIndex].subTasks.push({})
      this.maintask = maintask
    },
    delTask(index, index1=-1) {
      const mainTask = this.maintask
      let id = ''
      // 删除子任务
      if (index1>=0) {
        id = mainTask[index].subTasks[index1].id
        mainTask[index].subTasks.splice(index1, 1)
      }
      // 删除主任务
      else {
        id = mainTask[index].id
        mainTask.splice(index, 1)
      }
      this.maintask = mainTask
      if (!id) {
        return
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        taskApi.deleteTask(id).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.reload()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 删除主任务奖励
    deleteTaskReward(index, index1) {
      const mainTask = this.maintask
      // let id = ''
      // // 删除主任务奖励
      // if (index1) {
      //   id = mainTask[index].mainReward[index1].id
      //   mainTask[index].mainReward.splice(index1, 1)
      // }
      // this.maintask = mainTask
      // if (!id) {
      //   return
      // }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.maintask[index].mainReward.splice(index1, 1)

        // taskApi.deletTask(id).then(res => {
        //   this.$message({
        //     type: 'success',
        //     message: '删除成功!'
        //   })
        //   this.reload()
        // })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '捕获异常'
        })
      })
    },

    onSubmit() {
      this.$message('submit!')
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped lang="scss">

.ar-shibietu-table{
  width: 100%;
  border-left: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;

  th{
    width: 150px;
    text-align: center;
  }
  th,td{
    border: 1px solid #dddddd;
    border-left: 0;
    border-bottom: 0;
    padding: 15px;
    img{
      max-height: 300px;
    }
  }
}

.line{
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

